:root {
  // --x-html-bg: var(--x-fg);
  --x-fg: hsl(0 0% 10%);
  --x-body-fg: hsl(0 0% 10%);
  --x-body-bg: hsl(0 0% 90%);
  @media (prefers-color-scheme: dark) {
    // --x-html-bg: hsl(0, 0%, 0%);
    --x-fg: hsl(0 0% 90%);
    --x-body-fg: hsl(0 0% 90%);
    --x-body-bg: hsl(0 0% 0%);
  }
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  word-break: break-word;
}
html {
  // background: var(--x-html-bg);
  scroll-behavior: smooth;
  font-size: 85%;
}
body {
  display: grid;
  place-content: safe center;
  vertical-align: middle;
  gap: var(--x-gutter);
  margin: 0;
  background: var(--x-body-bg);
  padding: 0;
  color: var(--x-body-fg);
  line-height: 1.5;
  font-family: var(--x-code-font-family);
}
a {
  cursor: pointer;
  color: var(--x-fg);
  text-decoration: none;
  &:hover,
  &:active {
    color: var(--x-fg);
    text-decoration: underline;
  }
}
